<template>
  <div>
    <div>
      <p>商品清单如下:</p>
      <div v-for="(item, index) in shopData" :key="index">
        {{ item.shopName }} --- {{ item.price }}元/份
      </div>
    </div>

    <p>请选择购买数量:</p>
    <Food v-for="(item, index) in shopData" :key="index" :obj="item" @changeE="item.count=$event"></Food>
    <p>总价为: {{ totalPrice }}</p>
  </div>
</template>

<script>
import Food from "@/components/practice-food.vue";
export default {
  data() {
    return {
      // 商品数据
      shopData: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  components: {
    Food,
  },
  computed: {
    totalPrice() {
      return this.shopData.reduce(
        (sum, item) => (sum += item.count * item.price),
        0
      );
    },
  },
};
</script>
